<template>
  <div class="text-mode-box">
    <div class="auxiIcon" @click="showModel" :class="'auxiIcon' + store.styleInfo.colorType">
      <i class="iconfonts">&#xe713;</i>
      <span>辅助信息</span>
    </div>
  </div>

  <div class="dialog-box-style-parent" :class="'dialog-box-style' + store.styleInfo.colorType">
    <t-dialog v-model:visible="textVisible" :header="props.title">
      <!-- v-html="props.data" -->
      <div
        v-if="textVisible"
        class="tj text-body-item"
        :style="{
          backgroundImage: `url(${
            publicUrls + 'template/template5/template5tkbg' + store.styleInfo.colorType + '.png'
          })`,
        }"
      >
        <div class="text-body-item-heard">
          <!-- <span>{{ props.title }}</span> -->
          <i class="doorIcon" @click="textVisible = false">&#xe63d;</i>
        </div>
        <div class="text-body-item-content">
          <!-- <auxiVue
            :moduleId="store.childModel.id"
            :imgBackground="colorList5[store.styleInfo.colorType - 1].auxiliaryColor"
            :exhibitBackground="colorList5[store.styleInfo.colorType - 1].shmentColor"
            @emitExhibits="emitExhibits"
          ></auxiVue> -->

          <textMaxMode />
        </div>
      </div>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { TextEllipsis } from 'vant';
import textMaxMode from './textMaxMode2.vue';
import { publicUrls, getTextHtml } from '@/utils/minxin';
import { colorList5 } from '../../data';
import { computed, ref, watch, onActivated, nextTick, onMounted } from 'vue';
import { useProjectStore } from '@/store';
import auxiVue from '../route/unitComponent/auxiliarys/index.vue';
const isBtn = ref(false);
const DomHeight = ref(null);
const textVisible = ref(false);
const store = useProjectStore();
const showBtn = ref(true);
const props = defineProps({
  tip: {
    type: String,
    default: '全部',
  },
  modelData: {
    type: String,
    default: '暂无内容',
  },
  color: {
    type: String,
    default: '#fff',
  },
  // 数据
  title: {
    type: String,
    default: '',
  },
  // 数据
  data: {
    type: String,
    default: '',
  },
  // 最大长度
  maxLen: {
    type: Number,
    default: 3,
  },
  flag: {
    type: Boolean,
    default: true,
  },
});
const showModel = () => {
  textVisible.value = true;
  // showBtn.value = !showBtn.value;
};
const sliceStr = computed(() => {
  if (props.data != null) {
    return props.data.substring(0, props.maxLen) + '...';
  }
  return '';
});

const getColor = () => {
  if (!props.flag) {
    return colorList5[store.styleInfo.colorType - 1].themeColor;
  } else {
    return colorList5[store.styleInfo.colorType - 1].shmentColor;
  }
};

onMounted(() => {
  if (!props.data && !DomHeight.value) {
    return;
  }

  //判断虚拟文本dom是否高于容器dom
  // alert(DomHeight.value.offsetHeight);
  setTimeout(() => {
    //判断虚拟文本dom是否高于容器dom
    if (DomHeight.value.offsetHeight > props.maxLen * 32) {
      isBtn.value = true;
    } else {
      isBtn.value = false;
    }
    DomHeight.value.style.display = 'none';
  }, 50000);
});
watch(
  () => props.data,
  () => {
    if (!props.data && !DomHeight.value) {
      return;
    }
    textVisible.value = false;
    DomHeight.value.style.display = 'block';
    setTimeout(() => {
      //判断虚拟文本dom是否高于容器dom
      if (DomHeight.value.offsetHeight > props.maxLen * 32) {
        isBtn.value = true;
      } else {
        isBtn.value = false;
      }
      DomHeight.value.style.display = 'none';
    }, 50000);
  },
);
watch(
  () => props.flag,
  () => {
    console.log(props.flag);

    getColor();
  },
  { deep: true, immediate: true },
);
</script>

<style lang="less" scoped>
.btnWord {
  cursor: pointer;
  color: #d2ad77;
  font-weight: 400;
  line-height: 32px;
}

.text-body-item {
  display: flex;
  flex-direction: column;
  // text-indent: 2em;
  height: 70vh;
  // width: 1180px;
  width: 1400px;
  padding: 40px;
  padding-top: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.text-body-item-heard {
  justify-content: center;
  font-family: 'SourceHanSerifCN-Bold';
  font-size: 34px;
  color: #443c2e;
  text-align: center;
  margin-bottom: 40px;
  .doorIcon {
    cursor: pointer;
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 30px;
    // line-height: 16px;
    color: #333 !important;
    z-index: 33;
  }
}
.text-body-item-content {
  width: 100%;
  scrollbar-width: none;
  // flex: 1;
  // overflow: auto;
}
.text-body-item-content::-webkit-scrollbar {
  background: rgba(0, 0, 0, 0.2);
  display: none;
}
// .text-body-item::-webkit-scrollbar-thumb {
//   background: rgba(255, 255, 255, 0.7);
// }
// .text-body-item::-webkit-scrollbar-track {
//   background: rgba(0, 0, 0, 0.2);
// }

.dialog-box-style-parent {
  position: fixed;
  z-index: 12000 !important;
  :deep(.t-dialog__ctx.t-dialog__ctx--fixed) {
    z-index: 12000 !important;
  }
  :deep(.t-dialog) {
    height: 70vh !important;
    width: 1400px !important;
  }
  :deep(.t-dialog__body) {
    padding: 0px;
  }
  :deep(.t-dialog__footer) {
    display: none;
  }
  :deep(.t-dialog__header) {
    display: none;
  }
}
.dialog-box-style1 {
  :deep(.t-dialog) {
    background: #452e20;
    border: none;
  }
  :deep(.doorIcon) {
    color: #e9d5b0;
  }
  :deep(.t-dialog__close) {
    .t-icon {
      font-size: 30px;
      color: #e9d5b0;
    }
  }
}
.dialog-box-style2 {
  :deep(.t-dialog) {
    background: #8c7a57;
    border: none;
  }
  :deep(.t-dialog__header) {
    color: #cbb995;
  }
  :deep(.doorIcon) {
    color: #cbb995;
  }
  :deep(.t-dialog__close) {
    .t-icon {
      font-size: 30px;
      color: #cbb995;
    }
  }
}
.dialog-box-style3 {
  :deep(.t-dialog) {
    background: #353c48;
    border: none;
  }
  :deep(.doorIcon) {
    color: #e9d5b0;
  }
  :deep(.t-dialog__header) {
    color: #e9d5b0;
  }
  :deep(.t-dialog__close) {
    .t-icon {
      font-size: 30px;
      color: #e9d5b0;
    }
  }
}
.text-mode-box {
  position: relative;
  width: 100%;
  z-index: 30;
  display: flex;
}
.DomHeight {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -99;
  width: 100%;
  text-indent: 2em;
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  text-align: justify;
  text-indent: 2em;
}
.text-mode-all {
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 32px;
  text-align: justify;
  text-indent: 2em;
}
.text-mode-eil {
  width: 100%;
  position: relative;
  :deep(.van-text-ellipsis) {
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
    text-align: justify;
    text-indent: 2em;
  }
  :deep(.van-text-ellipsis__action) {
    display: none;
    opacity: 0;
  }
}
.text-mode-eil-flot {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  span {
    cursor: pointer;
    font-size: 16px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 32px;
  }
}
.text-mode-eil1 {
  :deep(.van-text-ellipsis) {
    color: #e9d5b0;
  }
  .text-mode-eil-flot {
    span {
      color: #ffe0a8;
    }
  }
}
.text-mode-eil2 {
  :deep(.van-text-ellipsis) {
    color: #cbb995;
  }
  .text-mode-eil-flot {
    span {
      color: #ecc983;
    }
  }
}
.text-mode-eil3 {
  :deep(.van-text-ellipsis) {
    color: #e9d5b0;
  }
  .text-mode-eil-flot {
    span {
      color: #e1d6b8;
    }
  }
}
.auxiIcon {
  width: 256px;
  height: 58px;

  background-repeat: no-repeat;
  background-size: contain;
  text-align: center;
  line-height: 58px;

  font-family: 'SourceHanSerifCN-medium';
  font-size: 22px;
  font-style: normal;
  margin: 0 auto;
  margin-bottom: 30px;
  cursor: pointer;
  i {
    padding-right: 5px;
  }
}
.auxiIcon1 {
  color: #452e20;
  background-image: url('https://static.jiyi.show/template/template5/auxiIcon4.png');
}
.auxiIcon1:hover {
  background-image: url('https://static.jiyi.show/template/template5/auxiIcon5.png');
  color: #fff;
}
.auxiIcon2 {
  color: #8c7a57;
  background-image: url('https://static.jiyi.show/template/template5/auxiIcon2.png');
}
.auxiIcon2:hover {
  background-image: url('https://static.jiyi.show/template/template5/auxiIcon3.png');
  color: #fff;
}
.auxiIcon3 {
  color: #353c48;
  background-image: url('https://static.jiyi.show/template/template5/auxiIcon.png');
}
.auxiIcon3:hover {
  background-image: url('https://static.jiyi.show/template/template5/auxiIcon1.png');
  color: #fff;
}
// .text-body-item-content {
//   :deep(.unit_box_right_content, .tdesign-demo-image-viewer__base) {
//     width: 1020px !important;
//   }
//   :deep(.tdesign-demo-image-viewer__base) {
//     width: 1020px !important;
//   }
//   :deep(.video-box) {
//     width: 1020px !important;
//   }
//   :deep(.exhibits-item-right) {
//     width: 544px !important;
//     padding-left: 0px !important;
//     flex: none;
//   }
//   :deep(.audio-box) {
//     width: 1020px !important;
//   }
//   // :deep(img) {
//   //   width: 100% !important;
//   // }
//   :deep(.unit-exbit-null-remarks-info-remarks) {
//     max-height: 100% !important;
//   }
//   :deep(.unit-exbit-null-remarks-info) {
//     max-height: 100% !important;
//   }
//   :deep(.solid-box) {
//     display: none;
//   }
:deep(.auxiliarys-box) {
  padding-top: 0 !important;
  margin-top: 0px !important;
  // >div {
  //   margin: 0;
  //   width: 1020px !important;
  // }
}
// }
</style>
